<template>
	<tl-sub-page :render="render" :visible.sync="visible" v-dialogDrag :title="title" :close-on-click-modal="false" class="tl-dialog" width="1200px" @open="open" @close="close">
		<el-form class="tl-form" ref="form" :model="model" :rules="rules" label-width="150px" :disabled="disableEditSubmit || disableSave">
			<el-row>
				<el-col :span="12">
					<el-form-item label="一级部门" prop="deptcommoncode">
						<el-select v-model="model.deptcommoncode" disabled>
							<el-option v-for="item in codeModel.deptcommoncodeList" :key="item.code" :label="item.name" :value="item.code" />
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="区域名称" prop="name" :rules="rules.validateRequire">
						<el-input v-model="model.name" @blur="saveName($event)"></el-input>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="12">
					<el-form-item label="区域级别" prop="arealevel">
						<el-select v-model="model.arealevel" disabled>
							<el-option v-for="item in codeModel.arealevelList" :key="item.code" :label="item.name" :value="item.code" />
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="单位类型" prop="areatype" :rules="rules.validateRequire">
						<el-select v-model="model.areatype" filterable clearable>
							<el-option v-for="item in areatypeList" :key="item.code" :label="item.name" :value="item.code" />
						</el-select>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="12">
					<el-form-item label="上级区域" prop="parentname">
						<el-input v-model="model.parentname" disabled></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="区域授权人员" prop="areaauthorizationusercode" :rules="rules.validateRequire">
						<tl-ref-user v-model="model.areaauthorizationusercode" :initDisplayData.sync="model.areaauthorizationusername" dataType="code" :singleSelect="false"></tl-ref-user>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="12">
					<el-form-item label="生效日期" prop="pmsenableddate" :rules="rules.validateRequire">
						<el-date-picker :picker-options="dateOptions" v-model="model.pmsenableddate" type="month" placeholder="选择生效月份" value-format="yyyy-MM-dd HH:mm:ss"> </el-date-picker>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="24">
					<el-form-item label="备注" prop="description">
						<el-input v-model="model.description" type="textarea" :rows="3"></el-input>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="12">
					<el-form-item label="排序码" prop="sortcode">
						<el-input-number v-model="model.sortcode" controls-position="right" :step="1" :min="0" style="width:100%"></el-input-number>
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>
		<tl-approval-history ref="history" sourceType="MmsProvinceCityMatchinfo" :sourceId="model.id" />
		<div slot="footer" class="dialog-footer">
			<el-button type="primary" @click="doSubmitEdit" :loading="saveLoading" v-if="disableEditSubmit === false && !disableSave" :disabled="disableSave">保存</el-button>
			<el-button type="primary" @click="$refs.history.visible = true" :disabled="disableApprovalHistory" v-show="stateApproval"><svg-icon icon-class="list" />审批历史</el-button>
		</div>
	</tl-sub-page>
</template>

<script>
/** mixins */
import { mixin_approval_edit } from '@tapui/mixins/mixin_approval_edit'
/** 子组件 */
import tlRefAreaGroup from './refAreaGroup'
import { MMS_AREA_LEVEL } from '@/const/const'
/** 工具类 */
import { putAction, getAction, postAction, deleteAction } from '@tapui/utils/http'
/** VUE配置 */
export default {
	mixins: [mixin_approval_edit],
	components: { tlRefAreaGroup },
	data() {
		return {
			moduleTitle: '下级省份地市信息',
			urlPrefix: '/mms/provinceCityMatchinfo/',
			url: {
				// 额外的url
				queryDataUrl: '/mms/provinceCityMatchinfo/list',
				queryTreeUrl: '/mms/provinceCityMatchinfo/queryParentTreeList',
				queryLevel: '/mms/provinceCityMatchinfo/queryLevel',
				queryDeptcommoncode: '/mms/provinceCityMatchinfo/queryDeptcommoncode'
			},
			dateOptions: {
				disabledDate: function(date) {
					return date < new Date()
				}
			},
			areatypeList: []
		}
	},
	props: {
		dataParam: {
			type: Object,
			default: undefined
		},
		cityInCharge: {
			type: Array,
			default: () => []
		}
	},
	computed: {
		// 审批状态判断
		stateApproval() {
			return this.model.state === 1
		}
	},
	methods: {
		assignDefaultValue() {
			if (this.isAdd) {
				this.$set(this.model, 'orgcode', this.org.code)
				this.$set(this.model, 'disporgcode', this.org.name)
				this.$set(this.model, 'deptcode', this.dept.code)
				this.$set(this.model, 'deptname', this.dept.fullname)
				this.$set(this.model, 'usercode', this.user.code)
				this.$set(this.model, 'username', this.user.name)
			}
		},
		loaded() {
			// 页面加载完毕执行
			if (this.isAdd) {
				let param = this.dataParam
				let level = parseInt(param.arealevel) + 1
				this.$set(this.model, 'arealevel', String(level))
				this.areatypeList = []
				if (level > 1) {
					this.areatypeList = this.codeModel.areatypeList.filter(item => item.name !== '省直属单位')
				} else {
					this.areatypeList = this.codeModel.areatypeList.filter(item => item.name !== '市直属单位')
				}
				this.$set(this.model, 'parentid', param.id)
				this.$set(this.model, 'parentname', param.name)
				this.$set(this.model, 'deptcommoncode', param.deptcommoncode)
			}
		},
		saveName(event) {
			let namelist = this.codeModel.deptname2List
			let obj = {}
			obj = namelist.find(function(item) {
				return item.name === event.target.value
			})
			if (obj) {
				this.$set(this.model, 'code', obj.code)
				this.$set(this.model, 'namecode', obj.code)
			}
		}
	}
}
</script>
